<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 必须注明版本 -->
  <link rel="stylesheet" href="../bower_components/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/bootstrap.css">
</head>
<body style="background-color:#057748;">

  <div class="container">
    <h1>创建模态框</h1>
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" type="button">Click me</button>
    <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal">
              <div class="form-group">
                <label for="" class="control-label col-md-2">Sina</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input class="form-control" type="text">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="" class="control-label col-md-2">URL</label>
                <div class="col-md-8">
                  <div class="input-group">
                    <span class="input-group-addon">http://</span>
                    <input class="form-control" type="url">
                  </div>
                </div>
              </div>             
            </div>
          </div>
          <div class="modal-footer" style="text-align:center;">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">提交更改</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container" style="margin-top:16px;">
    <h1>滚动监听</h1>
    <nav class="navbar navbar-default" id="navbar">
      <div class="navbar-header">
        <a class="navbar-brand" href="">brand</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy" type="button">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
        <ul class="nav navbar-nav">
          <li><a href="#html">HTML</a></li>
          <li><a href="#css">CSS</a></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">JS<i class="caret"></i></a>
            <ul class="dropdown-menu">
              <li><a href="#string">string</a></li>
              <li><a href="#array">array</a></li>
              <li><a href="#object">object</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div data-scroll="spy" data-target="#navbar">
      <div>
        <h2 id="html">HTML</h2>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
      </div>
      <div>
        <h2 id="css">CSS</h2>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
      </div>
      <div>
        <h2 id="js">JS</h2>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
        <div>
          <h3 id="string">string</h3>
          <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
        </div>
        <div>
          <h3 id="array">array</h3>
          <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
        </div>
        <div>
          <h3 id="object">object</h3>
          <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
        </div>                
      </div>            
    </div>
  </div>

  <div class="container">
    <h1>标签页</h1>
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a data-toggle="tab" href="#home">W3Cschool Home</a>
      </li>
      <li>
        <a data-toggle="tab" href="#ios">iOS</a>
      </li>
      <li>
        <a class="dropdown-toggle" data-toggle="dropdown" href="">Java<i class="caret"></i></a>
        <ul class="dropdown-menu">
          <li>
            <a data-toggle="tab" href="#jmeter">jmeter</a>
          </li>
          <li>
            <a data-toggle="tab" href="#ejb">ejb</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade in active" id="home">
        <p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
      </div>
      <div class="tab-pane fade" id="ios">
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
      </div>
      <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
      </div>
      <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如JBOSS、Web Logic 等）的 J2EE 上。
        </p>
      </div>
    </div>
  </div>

  <div class="container">
    <h1>提示工具</h1>
    <div>
      <button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="默认的提示" type="button">button</button>
      <button class="btn btn-info" data-toggle="tooltip" data-placement="right" title="右边的提示" type="button">button</button>
      <button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="下面的提示" type="button">button</button>
      <button class="btn btn-success" data-toggle="tooltip" title="left" title="左边的提示" type="button">button</button>
    </div>
    <!-- 需要在引入bootstrap.js之后声明提示工具的使用 -->
    <!--<script>
      $(function(){
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>-->
  </div>

  <div class="container">
    <h1>弹出框</h1>popover
    <div>
      <button class="btn btn-primary" data-toggle="popover" data-placement="top" title="默认的提示" type="button">button</button>
      <button class="btn btn-info" data-toggle="popover" data-placement="right" title="右边的提示" type="button">button</button>
      <button class="btn btn-warning" data-toggle="popover" data-placement="bottom" title="下面的提示" type="button">button</button>
      <button class="btn btn-success" data-toggle="popover" title="left" title="左边的提示" type="button">button</button>
    </div>
    <!-- 需要在引入bootstrap.js之后声明提示工具的使用 -->
    <!--<script>
      $(function(){
        $('[data-toggle="popover"]').popover();
      });
    </script>-->
  </div>  

  <div class="container">
    <h1>折叠面板</h1>
    <pre>
      1. data-toggle="collapse" href="#collapseOne"
      2. data-parent="#accordion"
      3. class="panel-collapse collapse" id="collapseOne"
    </pre>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapseOne" data-parent="#accordion">点击我展开，再次点击我折叠。第 1 部分</a>
          </h4>
        </div>
        <div class="panel-collapse collapse in" id="collapseOne">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
          </div>
        </div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapseTwo" data-parent="#accordion">点击我展开，再次点击我折叠。第 2 部分</a>
          </h4>
        </div>
        <div class="panel-collapse collapse" id="collapseTwo">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
          </div>
        </div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapseThree" data-parent="#accordion">点击我展开，再次点击我折叠。第 3 部分
            </a>
          </h4>
        </div>
        <div class="panel-collapse collapse" id="collapseThree">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
          </div>
        </div>
      </div>
    </div>    
  </div>

  <div class="container">
    <h1>轮播</h1>
    <div id="myCarousel" class="carousel slide" style="width:300px;height:150px;margin:0 auto;">
      <!-- 轮播分页器 -->
      <ol class="carousel-indicators" style="margin-bottom:-20px;">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>   
      <!-- 轮播项目 -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/a.jpg" alt="First slide" style="max-height:150px">
        </div>
        <div class="item">
          <img src="images/b.jpg" alt="Second slide" style="max-height:150px;">
        </div>
        <div class="item">
          <img src="images/c.jpg" alt="Third slide" style="max-height:150px;">
        </div>
      </div>
      <!-- 前进后退按钮 -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lt;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&gt;</a>
    </div>    
  </div>


  <!-- 必须注明版本 -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <!-- 必须注明版本 -->
  <script src="../bower_components/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>